<template>
	<view class="page">
		<view class="header">
			<image class="bg" src="../../static/image/user_bg.png" mode=""></image>
			<view class="user-info">
				<image v-if="this.user_sex=='男'" class="img" src="../../static/image/man.png" mode=""></image>
				<image v-if="this.user_sex=='女'" class="img" src="../../static/image/woman.png" mode=""></image>
				<span class="sp_1">{{user_name}}</span>
				<span class="sp_2">
					<image class="img" src="../../static/image/phone.png" mode=""></image> {{user_phone}}
				</span>
			</view>
		</view>
		<view class="change_bt">

			<!-- <view class="box" @click="go_exit">
				<label class="left">
					<image style="height: 44rpx;width: 44rpx;margin-right: 25rpx" src="../../static/image/yichang.png"
						mode=""></image>异常判定设置
				</label>
				<span class="right_inp">></span>
			</view> -->
			<view class="box" style="position: relative;">
				<label class="left" style="padding-left: 60rpx;">
					<image style="height: 45rpx;width: 37rpx;position: absolute;top: 40rpx;left: 30rpx"
						src="../../static/image/bingli.png" mode=""></image>病例信息
				</label>
				<span class="right_inp">></span>
			</view>
			<view class="box" @click="login_out" style="border: none;position: relative">
				<label class="left" style="padding-left: 60rpx;"><image style="height: 45rpx;width: 37rpx;position: absolute;top: 42rpx;left: 30rpx;"
						src="../../static/img/loginout.png" mode=""></image>退出登录</label>
				<span class="right_inp">></span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_name: '',
				user_phone: '',
				user_sex: '',
			}
		},
		methods: {
			go_exit() {
				uni.navigateTo({
					url: '/page_xinlu/shezhi/shezhi'
				})
			},
			login_out() {
				this.$store.state.vx_token = ''
				uni.navigateTo({
					url: '/pages/login/index'
				})
			}

		},
		onLoad() {
			this.user_name = this.$store.state.name
			this.user_phone = this.$store.state.vx_phone
			this.user_sex = this.$store.state.vx_sex
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		height: 100%;
		position: relative;
		overflow: auto;

		.header {
			width: 100%;
			height: 500rpx;
			position: relative;

			.bg {
				width: 100%;
				height: 344rpx;
			}

			.user-info {
				width: 250rpx;
				height: 260rpx;
				position: absolute;
				left: 250rpx;
				top: 160rpx;
				display: flex;
				flex-direction: column;
				text-align: center;

				.img {
					width: 154rpx;
					height: 174rpx;
					margin-left: 50rpx;
				}

				.sp_1 {
					width: 250rpx;
					display: inline-block;
					height: 35rpx;
					font-weight: 500;
					font-size: 38rpx;
					color: #333738;
				}

				.sp_2 {
					display: inline-block;
					width: 260rpx;
					height: 23rpx;
					font-weight: 400;
					font-size: 28rpx;
					margin-top: 35rpx;
					margin-left: -25rpx;
					line-height: 28rpx;
					color: #63696B;

					.img {
						width: 23rpx;
						height: 30rpx;
						float: left;
						padding-right: 10rpx;
					}
				}
			}
		}

		.change_bt {
			// position: absolute;
			// top: 30%;
			// left: 30rpx;
			margin: 0 auto;
			width: 692rpx;
			height: 650rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 28rpx 0rpx #E8EEEF;

			// border-radius: 30rpx;
			.box {
				// width: 100%;
				height: 130rpx;
				margin: 0 31rpx;
				border-bottom: 1rpx solid rgba(153, 158, 160, 0.23);
				line-height: 130rpx;

				.left {
					float: left;
					margin-left: 30rpx;
					// width: 200rpx;
					font-weight: 400;
					font-size: 35rpx;
					color: #333738;
				}

				.right_inp {
					float: right;
					margin-right: 20rpx;
					margin-top: 5rpx;
					width: 18rpx;
					height: 30rpx;
					font-size: 38rpx;
					color: #999EA0;
				}
			}
		}

		.li {
			width: 100%;
			height: 102rpx;
			position: relative;

			.img {
				position: absolute;
				top: 34rpx;
				left: 34rpx;
				width: 29rpx;
				height: 36rpx;
			}

			.sp_1 {
				display: inline-block;
				position: absolute;
				top: 30rpx;
				left: 96rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
			}

			.img_2 {
				position: absolute;
				right: 10rpx;
				top: 30rpx;
				width: 50rpx;
				height: 45rpx;

			}
		}
	}
</style>